<script setup>
import { Search } from "vant";
import { ref } from "vue";
function useSearch() {
  const value = ref("");
  const onSearch = (val) => {
    console.log(val);
  };
  const onCancel = () => {
    console.log("取消");
  };
  return {
    value,
    onSearch,
    onCancel,
  };
}

const { value, onSearch, onCancel } = useSearch();

const props = defineProps({});
</script>
<template>
  <view>
    <van-search
      v-model="value"
      shape="round"
      background="linear-gradient(to bottom, #7945ab, #a855f7)"
      placeholder="请输入搜索关键词"
      show-action
      @search="onSearch"
      @cancel="onCancel"
    >
      <template #action>
        <view @click="onSearch">搜索</view>
      </template>
    </van-search>
  </view>
</template>
<style lang="scss" scoped></style>
